<template>
    <view class="main">
        <uni-card  spacing="0" padding="0">
            <view class="row">
				<uni-row>
					<uni-col :span="2">
						<image class="image-header" src="/static/images/index/huanbao.png"></image>
					</uni-col>
					<uni-col :span="22">
						<view class="title">环保效益</view>
					</uni-col>
				</uni-row>
			</view>
            <u-line></u-line>
            <view class="row">
                <view class="display">
                    <image class="icon" :src="'/static/images/index/mei.png'" mode="scaleToFill" />
                    <view class="lineBlock">
                        <view>
                            代替标煤
                        </view>
                        <view class="num">
                            {{ EmissionReductions.carbon }}t
                        </view>
                    </view>
                </view>
                <view class="display">
                    <view>
                        <image class="icon" :src="'/static/images/index/tree.png'" mode="scaleToFill"></image>
                        <view class="lineBlock">
                            <view>
                                SO2减排量
                            </view>
                            <view class="num">
                                {{ EmissionReductions.so2 }}t
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <u-line></u-line>
            <view class="row">
                <view class="display">
                    <view>
                        <image class="icon" :src="'/static/images/index/car.png'" mode="scaleToFill" />
                        <view class="lineBlock">
                            <view>
                                CO2减排量
                            </view>
                            <view class="num">
                                {{ EmissionReductions.co2 }}t
                            </view>
                        </view>
                    </view>
                </view>
                <view class="display">
                    <image class="icon" :src="'/static/images/index/cloud.png'" mode="scaleToFill"></image>
                    <view class="lineBlock">
                        <view>
                            粉尘减排量
                        </view>
                        <view class="num">
                            {{ EmissionReductions.tree }}t
                        </view>
                    </view>
                </view>
            </view>
        </uni-card>
    </view>
</template>

<script setup>
import { getRegionPowerData } from '@/api/report';
import { ref, onMounted } from 'vue';
const EmissionReductions = ref({});

onMounted(async () => {
  const par = {
    regionId: 285,
    regionType: 2,
  };
  const res = await getRegionPowerData(par);
  EmissionReductions.value = {
    carbon: res.carbon.toFixed(2),
    so2: res.so2.toFixed(2),
    co2: res.co2.toFixed(2),
    tree: res.tree.toFixed(2),
  };
});
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
}

.row {
    font-size: 32rpx;
	color: #333;
	padding: 20rpx 10rpx;
}

.display {
	display: inline-block;
	width: 50%;
}

.icon {
    height: 46rpx;
	width: 46rpx;
	margin-left: 15rpx;
    margin-bottom: 15rpx;
}

.lineBlock {
	display: inline-block;
	margin: 10rpx 0 10rpx 20rpx;
    font-size:28rpx;
}

.num {
    font-size: 26rpx;
    color: darkgrey;
}
.image-header {
    height: 35rpx;
	width: 35rpx;
	margin-left: 14rpx;
    margin-top: 6rpx;
}
.title {
	margin-left: -2rpx;
	font-size: 32rpx;
}
</style>
